<template>
  <div id="userCard" class="card">
    <h1>{{ userName }}</h1>
    <div>
      <el-tag v-if="admin">系统管理员</el-tag>
      <el-tag type="info" v-if="!admin">普通用户</el-tag>
    </div>
    <div id="buttons">
      <el-button type="primary" @click="userCenterVisible = true"
        >个人中心</el-button
      >
      <el-popconfirm title="您确定要退出登录吗?" @confirm="logout">
        <template #reference>
          <el-button type="primary">退出登录</el-button>
        </template>
      </el-popconfirm>
    </div>
  </div>
  <el-dialog :show-close="false" v-model="userCenterVisible" width="70vw">
    <template #header="{ close }">
      <div class="userCenterHeader">
        <h4 :id="titleId" :class="titleClass">个人中心</h4>
        <el-popconfirm width="15vw" title="您确定要关闭吗?未保存的数据将丢失！" @confirm="close">
          <template #reference>
            <el-button type="danger"> X </el-button>
          </template>
        </el-popconfirm>
      </div>
    </template>
    <UserCenter></UserCenter>
  </el-dialog>
</template>
<script>
import UserCenter from "../userCanter.vue";
export default {
  components: {
    UserCenter,
  },
  data() {
    return {
      userName: localStorage.getItem("userName"),
      admin: localStorage.admin == 'true',
      userCenterVisible: false,
    };
  },
  methods: {
    logout() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
#userCard {
  margin-left: 0.6vw;
  margin-top: 1vh;
  align-items: center;
  text-align: center;
  width: 20vw;
  height: 21vh;
  padding: 20px;
}

#userCard > h1 {
  font-size: 2vw;
  text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.25);
}

#userCard > #buttons {
  margin-top: 1.6vh;
}

.el-tag {
  margin-top: 1vh;
  font-size: 1.7vh;
}

.el-button {
  height: 4vh;
  font-size: 1.7vh;
}

.userCenterHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

.userCenterHeader > h4 {
  font-size: 1.5vw;
}

.userCenterHeader > .el-button {
  height: 25px;
  width: 25px;
  padding: 0;
}
</style>